<route>
{
"meta":{
"title":"审批组",
"showMenu":true,
"serialNum": 40,
"localism": "sys.approval_group"
}
}
</route>

<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="6">
        <el-input
          v-model="queryData.name"
          :placeholder="$t('sys.approval_group_name')"
          clearable
          :maxlength="64"
          prefix-icon="el-icon-search"
        />
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="loadData(1)">{{$t('sys.query')}}</el-button>
        <el-button @click="handleReset">{{$t('sys.reset')}}</el-button>
      </el-col>
      <el-col class="mt10">
        <el-button type="primary" @click="handleCreate">{{$t('sys.new')}}</el-button>
      </el-col>
    </el-row>
    <el-table
      class="mt10 ds-table"
      :data="tableData"
      style="width: 100%"
      current-row-key="id"
      stripe
      border
      @expand-change="expandChange"
    >
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-table
            class="ds-table"
            :data="scope.row.groupMembers"
            style="width: 100%"
            current-row-key="id"
            stripe
            border
          >
            <el-table-column prop="name" :label="$t('sys.member_name')" />
            <el-table-column prop="userName" :label="$t('sys.member_account')" />
            <el-table-column prop="createDate" :label="$t('sys.join_time')">
              <template slot-scope="subScope">
                {{ subScope.row.createDate | moment }}
              </template>
            </el-table-column>
            <el-table-column prop="serialNum" :label="$t('sys.serial_number')">
              <template slot-scope="subScope">
                <span v-if="!subScope.row.isEdit">
                  {{ subScope.row.serialNum }}</span
                >
                <el-input-number
                  v-model="subScope.row.serialNum"
                  v-if="subScope.row.isEdit"
                  style="width: calc(100% - 70px)"
                  size="mini"
                  controls-position="right"
                  :min="1"
                  :max="999999999"
                ></el-input-number>
                <el-button v-if="!subScope.row.isEdit" class="ml10" type="text">
                  <i
                    class="el-icon-edit f16 ml20"
                    @click="handleEditMemberSerial(subScope.row)"
                  ></i>
                </el-button>
                <el-button
                  v-if="subScope.row.isEdit"
                  class="color-success"
                  type="text"
                >
                  <i
                    style="font-weight: 600"
                    class="el-icon-check f16 ml10 mr5 b"
                    @click="changeMemberSerialNum(subScope.row, scope.row)"
                  >
                  </i>
                </el-button>
                <el-button
                  v-if="subScope.row.isEdit"
                  class="color-error"
                  type="text"
                >
                  <i
                    style="font-weight: 600"
                    class="el-icon-close f16"
                    @click="$set(subScope.row, 'isEdit', false)"
                  >
                  </i>
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="actions" :label="$t('sys.operation')" width="150">
              <template slot-scope="subScope">
                <span class="table-actionItem">
                  <el-popconfirm
                    :title="$t('sys.confirm_to_delete_user')"
                    placement="top"
                    @confirm="handleDeleteMember(subScope.row, scope.row)"
                  >
                    <el-button class="link-danger" type="text" slot="reference"
                      >{{$t('sys.delete')}}</el-button
                    >
                  </el-popconfirm>
                </span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column prop="name" :label="$t('sys.full_name')" />
      <el-table-column prop="remark" :label="$t('sys.remarks')" />
      <el-table-column prop="createBy" :label="$t('sys.creator')" />
      <el-table-column prop="createDate" :label="$t('sys.create_time')">
        <template slot-scope="scope">
          {{ scope.row.createDate | moment }}
        </template>
      </el-table-column>
      <el-table-column prop="actions" :label="$t('sys.operation')" width="200">
        <template slot-scope="scope">
          <span class="table-actionItem">
            <el-button type="text" @click="handleGroupMemberAdd(scope.row)"
              >{{$t('sys.add_member')}}</el-button
            >
          </span>
          <span class="table-actionItem">
            <el-button type="text" @click="handleEdit(scope.row)"
              >{{$t('sys.edit')}}</el-button
            >
          </span>
          <span class="table-actionItem">
            <el-popconfirm
              :title="$t('sys.confirm_to_delete_approval_group')"
              placement="top"
              @confirm="handleDelete(scope.row)"
            >
              <el-button class="link-danger" type="text" slot="reference"
                >{{$t('sys.delete')}}</el-button
              >
            </el-popconfirm>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="tr mt24">
      <x-pagination
        :total="total"
        :pageSize.sync="pageData.pageSize"
        :pageNo.sync="pageData.pageNo"
        @search="loadData"
      />
    </div>

    <GroupForm ref="GroupForm" @ok="loadData(pageData.pageNo)" />
    <select-modal
      :title="$t('sys.select_member')"
      ref="SelectMemberModal"
      :treeData="orgTree"
      :treeNodeChange="handleSelectMemberNodeChange"
      @ok="handleMemberChange"
    >
    </select-modal>
  </div>
</template>

<script>
import GroupForm from "./__components__/GroupForm";



import { arrayToTree } from "@/utils/util";
import SelectModal from "@/components/SelectModal";
import { getHmapprovegroupPageList,deleteHmapprovegroup } from '@/apis/paas/HmApproveGroupController.js'
import { getHmorgListwithpermission } from '@/apis/paas/HmOrgController.js'
import { getHmuserPageListwithpermission } from '@/apis/paas/HmUserController.js'
import { getHmapprovegroupmemberList,deleteHmapprovegroupmember,postHmapprovegroupmember,putHmapprovegroupmember } from '@/apis/paas/HmApproveGroupMemberController.js'
export default {
  name: "ApproveGroup",
  components: {
    GroupForm,
    SelectModal,
  },
  data() {
    return {
      VUE_APP_USER: process.env.VUE_APP_USER,
      orgTree: [],
      groupMembers: [],
      currentGroup: "", // 当前添加用户的审批组
      currentGroupId: "", // 当前添加用户的审批组id
      loading: false,
      queryData: { name: "" },
      pageData: {
        pageSize: 10,
        pageNo: 1,
      },
      tableData: [],
      total: 0,
    };
  },

  created() {
    this.loadData();
  },

  methods: {
    loadData(pageNo = this.pageData.pageNo) {
      this.loading = true;
      getHmapprovegroupPageList({
        ...this.queryData,
        ...this.pageData,
        pageNo,
      })
        .then((res) => {
          if (res.data.length === 0 && pageNo > 1) {
            this.loadData(pageNo - 1);
            return;
          }
          res.data.map((item) => {
            item.groupMembers = [];
          });
          this.tableData = res.data;
          this.total = res.totalCount;
          this.pageData = {
            pageSize: res.pageSize,
            pageNo: res.pageNo,
          };
        })
        .finally(() => {
          this.loading = false;
        });
    },

    handleCreate() {
      this.$refs.GroupForm.addForm();
    },

    handleEdit(record) {
      this.$refs.GroupForm.editForm({
        ...record,
      });
    },

    handleDelete(record) {
      deleteHmapprovegroup([record.id]).then((res) => {
        this.loadData();
        this.$message.success(this.$t("sys.operation_success"));
      });
    },
    // 删除成员
    handleDeleteMember(member, group) {
      deleteHmapprovegroupmember([member.id]).then(() => {
        this.loadGroupMember(group.id, group);
        this.$message.success(this.$t("sys.operation_success"));
      });
    },

    handleReset() {
      this.queryData = {};
      this.loadData(1);
    },
    expandChange(row) {
      if (!row?.groupMembers?.length) {
        this.loadGroupMember(row.id, row);
      }
    },

    loadGroupMember(groupId = this.currentGroupId, row = this.currentGroup) {
      getHmapprovegroupmemberList({
        groupId: groupId,
      }).then((res) => {
        this.groupMembers = res;
        this.$set(row, "groupMembers", res);
      });
    },
    async handleGroupMemberAdd(record) {
      if (!record?.groupMembers?.length) {
        const members = await getHmapprovegroupmemberList({
          groupId: record.id,
        });
        record.groupMembers = members || [];
      }
      this.currentGroup = record;
      this.currentGroupId = record.id;
      let groupMembers = record?.groupMembers?.map((i) => i.userId) || [];
      getHmorgListwithpermission().then((res) => {
        this.orgTree = arrayToTree(res);
        this.$refs.SelectMemberModal.open(groupMembers);
      });
    },
    // 添加成员
    handleMemberChange(data) {
      const { item } = data;
      if (item.length === 0) {
        return;
      }
      const ids = item.map((ele) => ele.id);
      const params = {
        groupId: this.currentGroupId,
        userIds: ids,
      };
      postHmapprovegroupmember(params).then((res) => {
        this.loadGroupMember();
        this.$message.success(this.$t("sys.operation_success"));
      });
    },

    async handleSelectMemberNodeChange(org) {
      let { data } = await getHmuserPageListwithpermission({
        pageSize: 100000,
        pageNo: 1,
        orgIds: org.id,
        status: 1,
      });
      return data;
    },
    handleEditMemberSerial(member) {
      this.$set(member, "isEdit", true);
    },
    // 改变编号
    changeMemberSerialNum(member, group) {
      const params = {
        id: member.id,
        serialNum: member.serialNum,
      };
      putHmapprovegroupmember(params).then(() => {
        this.loadGroupMember(group.id, group);
        this.$message.success(this.$t("sys.operation_success"));
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.color-success {
  color: #67c23a;
}
.color-error {
  color: #f56c6c;
}
</style>
